<template>
  <div>
    <van-search placeholder="搜索" class="info_search input_text" v-model="value" @search="onSearch" @clear="clearSearch"></van-search>
    <van-list v-bind:finished="myFinished" v-model="myLoading" finished-text="没有更多了" @load="myOnLoad">
      <van-cell class="card" @click="openDetail(item)" v-for="(item, index) in myList" v-bind:key="index">
        <div>
          <div>
            <van-row>
              <van-col>
                <img class="icon" src="@/assets/Images/AppIcon/icon_nav_employee_on.png" />
                职业病危害因素：{{ item.HazardFactors}}
              </van-col>
            </van-row>
            <van-row>
              <van-col>
                <img class="icon" src="@/assets/Images/AppIcon/icon_list_org.png" />
                部门：{{ item.OrgName}}
              </van-col>
            </van-row>
            <van-row>
              <van-col>
                <img class="icon" src="@/assets/Images/AppIcon/icon_list_security.png" />
                防护用品：{{ item.ProtectArticles}}
              </van-col>
            </van-row>
            <van-row>
              <van-col>
                <img class="icon" src="@/assets/Images/AppIcon/icon_list_lost.png" />
                技术措施：{{ item.TechnicalMeasures}}
              </van-col>
            </van-row>
            <van-row>
              <van-col>
                <img class="icon" src="@/assets/Images/AppIcon/icon_list_progress.png" />
                体检频次：{{ item.InspectFrequency}}
              </van-col>
            </van-row>
            <van-row>
              <van-col>
                <img class="icon" src="@/assets/Images/AppIcon/icon_list_group.png" />
                接害人数：{{ item.HurtPersonCount}}
              </van-col>
            </van-row>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>
<script>
import { nsOccupationalDiseasesReasonList } from "@/api/ns";
import { List } from "vant";
export default {
  data() {
    return {
      value: "",
      myList: [],
      myFilter: {
        page: 0,
        dataType: "List"
      },
      loading: false,
      finished: false,
      myLoading: false,
      myFinished: false
    };
  },
  created() {
    this.getMyList();
  },
  methods: {
    onSearch() {
      var conditions1 = [];
      if (this.value) {
        conditions1.push({
          Name: "HazardFactors",
          DisplayName: this.value,
          value: this.value,
          Operator: "like",
          DataType: "String"
        });
      }
      this.myFilter.page = 0;
      this.myFilter.conditions = JSON.stringify(conditions1);
      this.getMyList();
    },
    clearSearch() {
      this.myFilter = {
        page: 0,
        dataType: "List"
      };
      this.value = "";
      this.getMyList();
    },
    getMyList() {
      this.myLoading = true;
      nsOccupationalDiseasesReasonList(this.myFilter).then(res => {
        this.myLoading = false;
        if (!res.data.HasNextPage) {
          this.myFinished = true;
        }
        this.myList = res.data.Data;
        this.myFilter.page = res.data.PageIndex;
      });
    },
    myOnLoad() {
      this.myLoading = true;
      ++this.myFilter.page;
      list(this.myFilter).then(res => {
        this.myLoading = false;
        this.myFilter.page = res.data.PageIndex;
        this.myList = this.myList.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.myFinished = true;
        }
      });
    },
    openDetail(item) {
      this.$router.push({
        path: "/NsOccupationalDiseasesReasonView",
        query: { id: item.ID }
      });
    }
  }
};
</script>
<style lang="less">
.info_search {
  padding: 10px;
  border-radius: 5px !important;
}
</style>